<template>
  <el-dialog :title="!dataForm.orderId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="80px">
      <el-form-item label="用户ID" prop="memberId">
        <el-input v-model="dataForm.memberId" placeholder="下单用户ID"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="dataForm.name" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="订单总额" prop="totalAmount">
        <el-input v-model="dataForm.totalAmount" placeholder="订单总额（含运费）"></el-input>
      </el-form-item>
      <el-form-item label="支付状态" prop="paymentStatus">
        <el-select v-model="dataForm.paymentStatus" placeholder="请选择支付状态">
          <el-option label="未支付" :value="1"></el-option>
          <el-option label="已支付" :value="2"></el-option>
          <el-option label="已退款" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单进度" prop="orderStatus">
        <el-select v-model="dataForm.orderStatus" placeholder="请选择订单进度">
          <el-option label="待付款" :value="1"></el-option>
          <el-option label="待发货" :value="2"></el-option>
          <el-option label="待收货" :value="3"></el-option>
          <el-option label="待评价" :value="4"></el-option>
          <el-option label="已完成" :value="5"></el-option>
          <el-option label="已取消" :value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省份/州" prop="province">
        <el-input v-model="dataForm.province" placeholder="省份/州"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="dataForm.city" placeholder="城市"></el-input>
      </el-form-item>
      <el-form-item label="区县" prop="district">
        <el-input v-model="dataForm.district" placeholder="区县"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" prop="detail">
        <el-input v-model="dataForm.detail" placeholder="详细地址"></el-input>
      </el-form-item>
      <el-form-item label="买家留言" prop="buyerMessage">
        <el-input v-model="dataForm.buyerMessage" placeholder="买家留言"></el-input>
      </el-form-item>
      <el-form-item label="收货人姓名" prop="consignee">
        <el-input v-model="dataForm.consignee" placeholder="收货人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="dataForm.phone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item label="实付金额" prop="payMoney">
        <el-input v-model="dataForm.payMoney" placeholder="实付金额"></el-input>
      </el-form-item>
      <el-form-item label="付款时间" prop="payTime">
        <el-date-picker v-model="dataForm.payTime" type="datetime" placeholder="选择付款时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="发货时间" prop="consignTime">
        <el-date-picker v-model="dataForm.consignTime" type="datetime" placeholder="选择发货时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="预计到货时间" prop="arrivalEstimatedTime">
        <el-date-picker v-model="dataForm.arrivalEstimatedTime" type="datetime" placeholder="选择预计到货时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="交易完成时间" prop="endTime">
        <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="选择交易完成时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="交易关闭时间" prop="closeTime">
        <el-date-picker v-model="dataForm.closeTime" type="datetime" placeholder="选择交易关闭时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="完成评价时间" prop="evaluationTime">
        <el-date-picker v-model="dataForm.evaluationTime" type="datetime" placeholder="选择完成评价时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="下单时间" prop="createdAt">
        <el-date-picker v-model="dataForm.createdAt" type="datetime" placeholder="选择下单时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="最后状态时间" prop="updatedAt">
        <el-date-picker v-model="dataForm.updatedAt" type="datetime" placeholder="选择最后状态时间"></el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        orderId: 0,
        memberId: '',
        name: '',
        totalAmount: '',
        paymentStatus: '',
        orderStatus: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        buyerMessage: '',
        consignee: '',
        phone: '',
        payMoney: '',
        payTime: '',
        consignTime: '',
        arrivalEstimatedTime: '',
        endTime: '',
        closeTime: '',
        evaluationTime: '',
        createdAt: '',
        updatedAt: ''
      },
      dataRule: {
        memberId: [
          { required: true, message: '下单用户ID不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        totalAmount: [
          { required: true, message: '订单总额（含运费）不能为空', trigger: 'blur' }
        ],
        paymentStatus: [
          { required: true, message: '支付状态不能为空', trigger: 'blur' }
        ],
        orderStatus: [
          { required: true, message: '订单进度不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '省份/州不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '城市不能为空', trigger: 'blur' }
        ],
        district: [
          { required: true, message: '区县不能为空', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        buyerMessage: [
          { required: true, message: '买家留言不能为空', trigger: 'blur' }
        ],
        consignee: [
          { required: true, message: '收货人姓名不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        payMoney: [
          { required: true, message: '实付金额不能为空', trigger: 'blur' }
        ],
        payTime: [
          { required: true, message: '付款时间不能为空', trigger: 'blur' }
        ],
        consignTime: [
          { required: true, message: '发货时间不能为空', trigger: 'blur' }
        ],
        arrivalEstimatedTime: [
          { required: true, message: '预计到货时间不能为空', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '交易完成时间不能为空', trigger: 'blur' }
        ],
        closeTime: [
          { required: true, message: '交易关闭时间不能为空', trigger: 'blur' }
        ],
        evaluationTime: [
          { required: true, message: '完成评价时间不能为空', trigger: 'blur' }
        ],
        createdAt: [
          { required: true, message: '下单时间不能为空', trigger: 'blur' }
        ],
        updatedAt: [
          { required: true, message: '最后状态时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.orderId = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.orderId) {
          this.$http({
            url: this.$http.adornUrl(`/order/orders/info/${this.dataForm.orderId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 200) {
              console.log(data);

              this.dataForm.memberId = data.data.memberId
              this.dataForm.name = data.data.name
              this.dataForm.totalAmount = data.data.totalAmount
              this.dataForm.paymentStatus = data.data.paymentStatus
              this.dataForm.orderStatus = data.data.orderStatus
              this.dataForm.province = data.data.province
              this.dataForm.city = data.data.city
              this.dataForm.district = data.data.district
              this.dataForm.detail = data.data.detail
              this.dataForm.buyerMessage = data.data.buyerMessage
              this.dataForm.consignee = data.data.consignee
              this.dataForm.phone = data.data.phone
              this.dataForm.payMoney = data.data.payMoney
              this.dataForm.payTime = data.data.payTime
              this.dataForm.consignTime = data.data.consignTime
              this.dataForm.arrivalEstimatedTime = data.data.arrivalEstimatedTime
              this.dataForm.endTime = data.data.endTime
              this.dataForm.closeTime = data.data.closeTime
              this.dataForm.evaluationTime = data.data.evaluationTime
              this.dataForm.createdAt = data.data.createdAt
              this.dataForm.updatedAt = data.data.updatedAt
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/order/orders/${!this.dataForm.orderId ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'orderId': this.dataForm.orderId || undefined,
              'memberId': this.dataForm.memberId,
              'name': this.dataForm.name,
              'totalAmount': this.dataForm.totalAmount,
              'paymentStatus': this.dataForm.paymentStatus,
              'orderStatus': this.dataForm.orderStatus,
              'province': this.dataForm.province,
              'city': this.dataForm.city,
              'district': this.dataForm.district,
              'detail': this.dataForm.detail,
              'buyerMessage': this.dataForm.buyerMessage,
              'consignee': this.dataForm.consignee,
              'phone': this.dataForm.phone,
              'payMoney': this.dataForm.payMoney,
              'payTime': this.dataForm.payTime,
              'consignTime': this.dataForm.consignTime,
              'arrivalEstimatedTime': this.dataForm.arrivalEstimatedTime,
              'endTime': this.dataForm.endTime,
              'closeTime': this.dataForm.closeTime,
              'evaluationTime': this.dataForm.evaluationTime,
              'createdAt': this.dataForm.createdAt,
              'updatedAt': this.dataForm.updatedAt
            })
          }).then(({ data }) => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
